<template>
  <div class="comment">
    <div v-for="item in props.comment" :key="item.id" class="comment_list">
      <div class="comment_list-content">
        <img :src="item.avatar">
        <div>
          <h1 class="kaiti">
            {{ item.author }}
            <n-tag :bordered="false" style="font-size: 12px;height:20px;" type="info" v-if="item.isblogger == '0'">博主</n-tag>
            <span>
              <svg class="icon" aria-hidden="true">
                <use :xlink:href="item.system"></use>
              </svg>
              {{ item.system.split('-')[1] }}
            </span>
            <span>
              <svg class="icon" aria-hidden="true">
                <use :xlink:href="item.browser"></use>
              </svg>
              {{ item.browser.split('-')[1] }}
            </span>
          </h1>
          <p v-html="item.text"></p>
          <h5>
            <span>{{ item.createTime }}</span>&nbsp; . &nbsp;
            <span>{{ item.address }}</span>
          </h5>
        </div>
        <div class="comment_list--reply">
          <n-button size="tiny" type="primary" @click="replyComm(item)">回复</n-button>
        </div>
      </div>
      <div>
        <n-divider title-placement="left"></n-divider>
      </div>
      <Comment :comment="item.children" v-if="item.children"  />
    </div>
  </div>
</template>

<script setup lang="ts">
//评论列表传值
const props = defineProps({
  comment:{
    type:Array,
    default: []
  }
})
//调用useState评论人信息
const commentMsg = useComment()
//调用useState是否显示被回复人信息
const showReply = useShowReply()
//调用useState回复组件ref
const publishRef = usPublishRef()
//回复按钮事件
const replyComm = (item:any) => {
  commentMsg.value = item
  console.log(publishRef)
  if(publishRef.value){
    publishRef.value.scrollIntoView({ block: "start",behavior: 'smooth' })
    showReply.value = true
  }
}
</script>

<style scoped lang="scss">
.comment{
  border-radius: 6px;
  height: auto;
  margin-right: 20px;
  padding: 0 40px;
  &_list{
    &-content{
      display: flex;
      position: relative;
      img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 5px;
      }
      h1{
        font-size: 16px;
        line-height: 20px;
        color: #666;
        margin-bottom: 10px;
        span{
          margin-left: 20px;
        }
      }
      p{
        font-size: 14px;
        line-height: 28px;
        margin-bottom: 10px;
      }
      h5{
        font-size: 12px;
        color: #999;
        vertical-align: middle;
      }
    }
    &--reply{
      position: absolute;
      right: 40px;
      bottom: 10px;
      display: none;
    }
  }
 }
.comment_list:hover .comment_list--reply{
  display: block;
}
</style>